<ion-header>
  <ion-navbar>
    <ion-title>
      {{lang.getText('explorer')}}
    </ion-title>
    <ion-buttons end>
      <button ion-button icon-only hidden (click)="showAbout()">
        <ion-icon name="settings"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content >
  <ion-searchbar animated="true" 
      [(ngModel)]="topicValue" (ionInput)="onSearchInput($event)" (ionCancel)="onSearchCancel($event)" debounce="2000"></ion-searchbar>

  <div *ngFor="let topic of topics" (click)="showTopic(topic)" hidden>
    <span>{{topic.name}} | {{topic.books}}</span>
  </div>
  <ion-list >
    <div ion-item *ngFor="let book of books">
      <div>
        <img src="https://www.gitbook.com/assets/images/templates/base-icon.svg"/>
      </div>
      <div>
        <b>{{book.title}}</b><br/>
        {{lang.getText('author')}}:{{book.author.username}}<br/>
        {{lang.getText('tags')}}:{{book.topics.join(";")}}<br/>
        <ion-buttons end>
          <button ion-button (click)="showDetails(book)">
            {{lang.getText('details')}}
          </button>
          <button ion-button (click)="read(book)">
            {{lang.getText('read')}}
          </button>
        </ion-buttons>
      </div>
    </div>
    <ion-label text-center>{{page}}/{{pages}}</ion-label>
    <button ion-button block *ngIf="hasPre" (click)="prePage()">
      {{lang.getText('previous')}}
    </button>
    <button ion-button block *ngIf="hasNext" (click)="nextPage()">
      {{lang.getText('next')}}
    </button>
  </ion-list>
</ion-content>
<!--ion-footer>
    <button ion-button large outline>
      Pre Page
    </button>
    <ion-label large>{{page}}/{{pages}}</ion-label>
    <button ion-button large outline>
     Next Page
    </button>
</ion-footer-->